<script setup lang="ts">
import klinePanel from "./kline-panel.vue";
import keyboardElf from "./keyboard-elf.vue";
import { CodeInfo } from "@/assets/api/rtdatasubscriberservice_0_0_1";
import { useQuoteStore } from "@/store/quote";

const quoteStore = useQuoteStore();

const onSelectCode = async (codeInfo: CodeInfo) => {
  quoteStore.addCode(codeInfo);
}



</script>

<template>
  <div class="quotes-page">
    <div class="quote-body">
      <kline-panel class="kline-panel" />
    </div>
    <keyboard-elf @select="onSelectCode" />
  </div>
</template>

<style scoped lang="scss">
.quotes-page {

  background: red;

  .quote-body {
    position: absolute;
    left: 0;
    top: 0px;
    right: 0;
    bottom: 0;


    .handicap {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      width: 252px;
    }

    .kline-panel {
      position: absolute;
      top: 0;
      right: 0px;
      left: 0px;
      bottom: 0;

    }
  }

}
</style>